<template>
  <div>
    <div class="header">
      <span>搜索用户数</span>
      <i class="el-icon-info"></i>
    </div>
    <div class="content">
      <span>12321</span>
      <span>17.1</span>
      <span class="el-icon-caret-top mytopico"></span>
      <span class="el-icon-caret-bottom mubottonico"></span>
    </div>
    <div class="footer" ref="charts"></div>
  </div>
</template>

<script>
// 引入 echarts
import echarts from "echarts";

export default {
  mounted() {
    let myecharts = echarts.init(this.$refs.charts);
    // 配置数据
    myecharts.setOption({
      xAxis: {
        // 隐藏x
        show: false,
        // 均分
        type: 'category'
      },
      yAxis: {
        // 隐藏y
        show: false
      },
      // 系列
      series: [
        {
          type: 'line',
          data: [10, 7, 33, 12, 88, 9, 80],
          // 拐点样式的设置
          itemStyle: {
            opacity: 0,
          },
          // 线条的样式设置
          lineStyle: {
            color: "#6C84C9",
          },
          // 平滑
          smooth: true,
          // 填充的颜色的设置
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#6C84C9", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        }
      ],
      // 布局调试
      grid: {
        left: 0,
        top: 0,
        reight: 0,
        bottom: 0
      }
    })
  }
}
</script>

<style lang="less" scoped>
.header {
  margin-top: 10px;
  font-size: 14px;
  line-height: 40px;
  color: #C1C0C1;

  >i {
    padding: 0px 20px;
  }
}

.content {
  span:first-child {
    padding-left: 0;
    font-size: 16px;
  }

  span {
    padding: 0px 10px;
  }

  .mytopico {
    color: #008000;
    font-size: 16px;
  }

  .mubottonico {
    color: #FF0000;
    font-size: 16px;
  }
}

.footer {
  width: 100%;
  height: 40px;
}
</style>